<template>
  <Mask v-if="visit" @click.native="closeDialog" />
  <Transition name="gotop">
    <div v-if="visit && dialogType === 1" class="pay-dialog">
      <h2 class="dia-tit">选择付费等级</h2>
      <div class="dia-content">
        <div class="pay-info">
          <div v-for="item in payInfo" :key="item.id" class="list-item" :class="{ active: selectItem === item.id }" @click="selectItem = item.id">
            <div class="pay-item">
              <p>{{ item.name }}</p>
              <div class="money"><span class="unit">￥</span><span class="real">{{ item.realPrice }}</span><s>￥{{ item.price }}&nbsp;</s></div>
            </div>
          </div>
        </div>
        <p class="tips">优惠内容：<br/>{{ payInfo[selectItem - 1].desc }}</p>
        <div class="dia-btn" @click="pay">立即支付 <b>￥{{ payInfo[selectItem - 1].realPrice }}</b></div>
      </div>
    </div>
    <div v-else-if="visit && dialogType === 2" class="pay-dialog">
      <h2 class="dia-tit">填写个人信息</h2>
      <div class="dia-content">
        <div class="dia-form">
          <div class="ipt-item">
            <span>手机号</span><input v-model="formParams.phone" type="text" placeholder="请填写您的手机号" />
          </div>
          <div class="ipt-item">
            <span>邮箱</span><input v-model="formParams.email" type="text" placeholder="请填写您的邮箱地址" />
          </div>
          <div class="ipt-item">
            <span>其他方式</span><input v-model="formParams.other" type="text" placeholder="请填写您的其他联系方式" />
          </div>
        </div>
        <div class="dia-btn" @click="submitForm">保 存</div>
      </div>
    </div>
  </Transition>
</template>
<script>
import Mask from "../../../components/Mask.vue";
export default {
  name: "PayDialog",
  components: {
    Mask
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      payInfo: [{
        id: 1,
        name: '一年',
        realPrice: 420,
        price: 600,
        desc: '1.免费下载100个视频；2.20个精品道具。'
      }, {
        id: 2,
        name: '六个月',
        realPrice: 228,
        price: 300,
        desc: '1.免费下载100个视频；2.10个精品道具。'
      }, {
        id: 3,
        name: '三个月',
        realPrice: 126,
        price: 150,
        desc: '1.免费下载100个视频；2.5个精品道具。'
      }, {
        id: 4,
        name: '一个月',
        realPrice: 45,
        price: 50,
        desc: '1.免费下载100个视频；2.2个精品道具。'
      }],
      selectItem: 1,
      dialogType: 1,
      formParams: {
        phone: '',
        email: '',
        other: ''
      }
    }
  },
  computed: {
    visit: {
      get() {
        return this.modelValue
      },
      set(val) {
        this.$emit('update:modelValue', val)
      }
    }
  },
  methods: {
    closeDialog() {
      this.selectItem = 1
      this.dialogType = 1
      this.formParams = {
        phone: '',
        email: '',
        other: ''
      }
      this.visit = false
    },
    pay() {
      this.report('pay', this.payInfo[this.selectItem - 1].realPrice)
      this.dialogType = 2
    },
    report(action, page = 1) {
      // type类型 visit 访问， more 点击更多， pay 点击支付，send 提交资料
      this.$api.user.report({
        uid: localStorage.getItem('uid'),
        page,
        action,
      })
    },
    async submitForm() {
      if (!this.formParams.phone && !this.formParams.email && !this.formParams.other) {
        return this.$showNoticeDialog('', '手机号、邮箱、其他方式至少填一个', '', () => console.log('关闭弹框'), '确定')
      }
      this.report('send')
      await this.$api.user.clue({
        uid: localStorage.getItem('uid'),
        phone: this.formParams.phone,
        mail: this.formParams.email,
        mark1: this.payInfo[this.selectItem - 1].realPrice,
        mark2: this.formParams.other,
      })
      this.$showNoticeDialog('', '拉开货车门，里面摆满了满满的电动外卖单车，随之一起到达的目的地的，还有20多名外卖小哥。', '', () => {
        this.closeDialog()
        location.href = 'https://www.baidu.com/'
        // console.log('关闭弹框')
      }, '确定')
    }
  }
}
</script>
<style scoped lang="less">

.pay-dialog {
  background-color: #fff;
  border-radius: 6rem 6rem 0 0;
  height: 430rem;
  max-height: 65vh;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 6;
  // transform: translateY(0);
  display: flex;
  flex-direction: column;
  .dia-tit {
    font-weight: 400;
    font-size: 20rem;
    margin: 0;
    padding: 0;
    line-height: 50rem;
    height: 50rem;
    padding: 0 10rem;
    border-bottom: 1rem solid #eee;
    flex: none;
  }
  .dia-content {
    padding: 10rem 10rem;
    // height: 360rem;
    overflow: auto;
    flex: auto;
    .pay-info {
      display: flex;
      flex-wrap: wrap;
    }
    .list-item {
      flex: none;
      width: 50%;
      padding: 6rem;
      border-radius: 10rem;
      box-sizing: border-box;
      border: 3rem solid #fff;
      background-color: #fff;
      color: #333;
      .pay-item {
        background: #f7f7f7;
        border-radius: 8rem;
        height: 70rem;
        padding: 15rem 10rem;
        > p {
          font-size: 16rem;
          margin: 0 0 5rem 0;
          height: 22rem;
        }
        .money {
          font-size: 16rem;
          white-space: nowrap;
          .real {
            font-size: 30rem;
            font-weight: 600;
            margin-right: 6rem;
          }
          > s {
            opacity: .5;
          }
        }
      }
      &.active {
        color: #fee4a0;
        border-color: #000;
        transition: all ease .1s;
        .pay-item {
          background-color: #4c4c4c;
          transition: all ease .1s;
        }
      }
    }
  }
  .tips {
    font-size: 14rem;
    line-height: 18rem;
    max-height: 54rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;
    margin: 0 10rem;
    margin-bottom: 15rem;
  }
  .dia-btn {
    background-color: #2d2d39;
    height: 46rem;
    line-height: 46rem;
    border-radius: 30rem;
    margin: 0 10rem;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 20rem;
  }

}

.dia-form {
  margin: 10rem 10rem 20rem;
  color: #1a1a1a;
  font-weight: 500;
}
.ipt-item {
  display: flex;
  align-items: center;
  margin-bottom: 5rem;
  > span {
    width: 90rem;
    line-height: 1.2;
    flex: none;
    font-size: 16rem;
  }
  > input {
    width: 90rem;
    height: 46rem;
    flex: auto;
    border: none;
    border-bottom: 1rem solid #e3e3e3;
    padding: 0;
    display: block;
    margin: 0;
    outline: none;
    font-size: 16rem;
  }
  ::-webkit-input-placeholder {
    color: #ccc;
  }
}
</style>
<style lang="less">
.gotop-enter-active {
  transition: all .2s ease-out;
}

.gotop-leave-active {
  transition: all .2s ease-in;
}

.gotop-enter-from,
.gotop-leave-to {
  transform: translateY(100%);
  // opacity: 0;
}
</style>
